﻿@section header {
    <!--[if IE]><script type="text/javascript" src="@Url.Content("~/Content/canvas/excanvas.js")"></script><![endif]-->
    <script src="@Url.Content("~/Content/canvas/WFModel.js")" type="text/javascript"></script>
    <script type="text/javascript">
        var sampleData = null; /*{
            name: '某某流程图',
            nodes: [
			    { ID: '1', name: '开始节点', type: 'WFNodeStart', position: { x: 40, y: 40} },
			    { ID: '2', name: '人工处理', type: 'WFNodeHandle', position: { x: 305, y: 250} },
			    { ID: '3', name: '人工处理', type: 'WFNodeHandle', position: { x: 35, y: 270} },
			    { ID: '4', name: '条件分支', type: 'WFNodeXORSplit', position: { x: 311, y: 311} },
			    { ID: '5', name: '人工处理', type: 'WFNodeHandle', position: { x: 600, y: 330} },
			    { ID: '6', name: '人工处理', type: 'WFNodeHandle', position: { x: 110, y: 37} },
			    { ID: '7', name: '结束节点', type: 'WFNodeFinish', position: { x: 666, y: 88} },
                { ID: '12', name: '事件节点', type: 'WFNodeEvent', position: { x: 616, y: 118} }
		    ],
            lines: [
			    { ID: '1', from: '1', to: '2', name: '活动12' }, //name:如果是处理节点,取动作,如果是条件结点,取条件
			    {ID: '1', from: '2', to: '3', name: '活动23' },
			    { ID: '1', from: '2', to: '4', name: '活动24' },
			    { ID: '1', from: '3', to: '4', name: '活动34' },
			    { ID: '1', from: '5', to: '6', name: '活动56' },
			    { ID: '1', from: '5', to: '7', name: '活动57' },
                { ID: '1', from: '4', to: '5', name: '活动45' }
		    ]
        };
        */
        var wfg;

        Ext.onReady(function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                border: 0,
                items: [
                {
                    xtype: 'panel',
                    border: 1,
                    layout: 'border',
                    defaults: { border: 1 },
                    title: '流程管理 - 流程建模',
                    items: [{
                        region: 'center',
                        xtype: 'panel',
                        //title: '流程图',
                        bbar: [
                        { xtype: 'label', id: 'graphStatus', text: '', height: 20 }
                        ],
                        lbar: [
                                { xtype: 'button', iconCls: 'iconWFSelect', enableToggle: true, toggleGroup: 'operateState', pressed: true, text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('select') } },
                                { xtype: 'button', iconCls: 'iconWFMove', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('move') } },
                                { xtype: 'button', iconCls: 'iconWFHandle', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('newHandle') } },
                                { xtype: 'button', iconCls: 'iconWFEvent', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('newEvent') } },
                                { xtype: 'button', iconCls: 'iconWFSplit', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('newSplit') } },
                                { xtype: 'button', iconCls: 'iconWFArrow', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('newTrans') } },
                                { xtype: 'button', iconCls: 'iconDelete', enableToggle: true, toggleGroup: 'operateState', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) { wfg.setOperateState('delete') } },
                                { xtype: 'tbseparator' },
                                { xtype: 'button', iconCls: 'iconSave', text: '', tooltip: '新建', tooltipType: 'title', handler: function (source, e) {
                                    Ext.Ajax.request({
                                        url: '/workflow/Manage/saveGraph',
                                        params: {
                                            templateId: wfg.data.ID
                                        },
                                        success: function (response) {
                                            alert('保存成功!');
                                            wfg.redrawAll();
                                        },
                                        failure: function (response) {
                                            alert(response.responseText);
                                        }
                                    });
                                }
                                },
                                { xtype: 'tbfill' },
                                { xtype: 'button', iconCls: 'iconRefresh', text: '', tooltip: '刷新', tooltipType: 'title', handler: function (source, e) { } }
                            ],
                        contentEl: 'divCanvas'
                    }, {
                        region: 'west',
                        xtype: 'grid',
                        id: 'templateList',
                        //title: '流程模板列表',
                        store: new Ext.data.Store({
                            fields: ['ID', 'Name', 'BuizName'],
                            proxy: {
                                type: 'ajax',
                                url: ' /workflow/Manage/getAllTemplates'
                            },
                            autoLoad: true,
                            listeners: {
                                load: function (store, records, successful) {
                                    if (!successful) {
                                        alert('数据加载失败');
                                    }
                                    else {
                                    }
                                }
                            }
                        }),
                        columns: [
                        new Ext.grid.RowNumberer(),
                        {
                            header: '编码',
                            dataIndex: 'Name',
                            width: 80
                        }, {
                            header: '名称',
                            dataIndex: 'BuizName',
                            flex: 1
                        }],
                        split: true,
                        tbar: [
                              { xtype: 'button', iconCls: 'iconNew', text: '', tooltip: '新建模板', tooltipType: 'title',
                                  handler: function (source, e) {
                                      new Ext.window.Window({
                                          title: '流程模板编辑',
                                          id: 'ffwin',
                                          modal: true,
                                          closable: true,
                                          width: 600,
                                          layout: 'fit',
                                          bodyPadding: 0,
                                          items: [
                                            new MB.form.WFTemplateEdit({
                                                id: '',
                                                close: function () { Ext.getCmp('ffwin').close(); },
                                                submitSccess: function (form, action) {
                                                    alert("submitSccess");
                                                    this.close();
                                                },
                                                submitFailure: function (form, action) { alert("submitFailure"); }
                                            })
                                        ]
                                      }).show();
                                  }
                              },
                               { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除模板', tooltipType: 'title',
                                   handler: function (source, e) {
                                       if (confirm("确认删除吗?")) {
                                           debugger;
                                           /*
                                           Ext.Ajax.request({
                                               url: '/workflow/Manage/deleteTemplate',
                                               params: {
                                                   id: Ext.getCmp('templateList').selModel.selected.items[0].data.ID
                                               },
                                               scope: this,
                                               success: function (response, opts) {
                                                   alert("submitSccess");
                                               },
                                               failure: function (response) {
                                                   alert(response.responseText);
                                               }
                                           });*/
                                       }
                                       else {
                                           alert('确认不删除');
                                       }
                                   }
                               },
                              { xtype: 'tbseparator' },
                              { xtype: 'tbfill' },
                              { xtype: 'button', iconCls: 'iconRefresh', text: '', tooltip: '刷新', tooltipType: 'title', handler: function (source, e) { } }
                            ],
                        width: 200,
                        listeners: {
                            itemclick: function (view, record, item, index, e) {
                                //alert(record.data.ID);
                                Ext.Ajax.request({
                                    url: '/workflow/Manage/getTemplate',
                                    params: {
                                        templateId: record.data.ID
                                    },
                                    success: function (response) {
                                        //alert(response.responseText);
                                        var result = Ext.JSON.decode(response.responseText).data;
                                        wfg = new WFGraph({ id: "myCanvas", data: result });
                                        wfg.fullCanvas();
                                    },
                                    failure: function (response) {
                                        alert(response.responseText);
                                    }
                                });
                            }
                        }
                    }
                    ]
                }
                ]
            });
        });

        window.onload = function () { //当前只能放在这里,如果放在Ext.onReady中加载,显示不出图片,但移动节点后可显示,不知道为什么?
            //alert('window.onload');
            
            // prob: 怎样让EXTJS与用户对象协作
        }
    </script>
}
<div id='divCanvas' style="height: 100%;">
    <canvas id="myCanvas">您的浏览器不支持 HTML5 Canvas。</canvas>
</div>
